<template>
  <div>
    <el-select
      :value="valueTitle"
      :clearable="clearable"
      @clear="clearHandle"
      :size="size"
      :disabled="disabled"
      style="width: 100%"
    >
      <el-option :value="valueTitle" :label="valueTitle" class="options">
        <el-tree
          id="tree-option"
          ref="selectTree"
          :accordion="accordion"
          :data="options"
          :props="treeselectprops"
          :highlight-current="highlight_current"
          :dufault-expand-all="default_expand_all"
          :node-key="treeselectprops.value"
          :default-expanded-keys="defaultExpandedKey"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      valueId: null,
      valueTitle: "",
      defaultExpandedKey: [],
      options: this.treeselectdatas.treeselect_data,
      accordion: this.treeselectdatas.accordion,
      clearable: this.treeselectdatas.clearable,
      size: this.treeselectdatas.size,
      disabled: this.treeselectdatas.disabled,
      highlight_current: this.treeselectdatas.highlight_current, //高亮显示节点
      default_expand_all: this.treeselectdatas.default_expand_all, //默认展开全部节点
    };
  },
  props: {
    // 配置项
    treeselectprops: {
      type: Object,
      default: {
        value: "RUID", // ID字段名
        label: "label", // 显示名称
        children: "children", // 子级字段名
      },
    },
    treeselectdatas: {
      type: Object,
      default() {
        return this.treeselectdatas;
      },
    },
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    // 初始化值
    initHandle() {
      this.$nextTick(() => {
        if (this.valueId && this.options.length > 0) {
          this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[
            this.treeselectprops.label
          ]; // 初始化显示
          this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
          this.defaultExpandedKey = [this.valueId]; // 设置默认展开
        } else {
          this.$nextTick(() => {
            console.log(12321321);
            this.valueTitle = "";
            this.defaultExpandedKey = [];
            let list = this.options;
            for (let i = 0; i < list.length; i++) {
              this.$refs.selectTree.store.getNode(list[i][this.treeselectprops.value]).expanded = false;
            }
          });
        }
        this.initScroll();
      });
    },
    // 初始化滚动条
    initScroll() {
      this.$nextTick(() => {
        let scrollWrap = document.querySelectorAll(
          ".el-scrollbar .el-select-dropdown__wrap"
        )[0];
        let scrollBar = document.querySelectorAll(
          ".el-scrollbar .el-scrollbar__bar"
        );
        scrollWrap.style.cssText =
          "margin: 0px; max-height: none; overflow: hidden;";
        scrollBar.forEach((ele) => (ele.style.width = 0));
      });
    },
    // 切换选项
    handleNodeClick(node) {
      this.valueTitle = node["" + this.treeselectprops.label + ""];
      this.valueId = node["" + this.treeselectprops.value + ""];
      this.$emit("get-value", this.valueId);
      this.defaultExpandedKey = [];
    },
    // 清除选中
    clearHandle() {
      this.valueTitle = "";
      this.valueId = null;
      this.defaultExpandedKey = [];
      this.clearSelected();
      this.$emit("get-value", null);
    },
    // 清空选中样式
    clearSelected() {
      let allNode = document.querySelectorAll("#tree-option .el-tree-node");
      allNode.forEach((element) => element.classList.remove("is-current"));
    },
  },
  watch: {
    value() {
      this.valueId = this.value; // 初始值
      this.initHandle();
    },
    treeselectdatas: {
      handler(newval, oldval) {
        this.treeselectdatas = newval;
        if (this.value && this.value != "") {
          this.valueId = this.value;
        } else {
          this.valueId = this.treeselectdatas.value; // 初始值
        }
        this.options = this.treeselectdatas.treeselect_data;
        this.accordion = this.treeselectdatas.accordion;
        this.clearable = this.treeselectdatas.clearable;
        this.size = this.treeselectdatas.size;
        this.disabled = this.treeselectdatas.disabled;
        this.default_expand_all = this.treeselectdatas.default_expand_all;
        this.highlight_current = this.treeselectdatas.highlight_current;
        this.initHandle();
      },
      deep: true,
    },
  },
  mounted() {
    if (this.value && this.value != "") {
      this.valueId = this.value;
    } else {
      this.valueId = this.treeselectdatas.value; // 初始值
    }
    this.options = this.treeselectdatas.treeselect_data;
    this.accordion = this.treeselectdatas.accordion;
    this.clearable = this.treeselectdatas.clearable;
    this.size = this.treeselectdatas.size;
    this.disabled = this.treeselectdatas.disabled;
    this.default_expand_all = this.treeselectdatas.default_expand_all;
    this.highlight_current = this.treeselectdatas.highlight_current;
    this.initHandle();
  },
};
</script>
<style>
.el-tree-node__content {
  max-width: 684px;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.span-ellipsis {
  line-height: 30px;
}
</style>  